<script setup>
    import { getProjectAreaDetails, getProjectAreaEdit } from '@/api/home'
    // import { ElMessage } from 'element-plus'

    let form = $ref({})
    let dataLoading = $ref(false)
    let showDialog = $ref(false)
    let btnLoading = $ref(false)

    let params = [
        {
            name: '乡镇',
            sub: [
                { key: 'street', lable: '街道' },
                { key: 'town', lable: '个镇' }
            ]
        },
        {
            name: '行政村',
            sub: [
                { key: 'community', lable: '个社区' },
                { key: 'administrativeVillage', lable: '个行政村' }
            ]
        },
        {
            name: '总面积',
            sub: [
                { key: 'totalArea', lable: 'km²' }
            ]
        },
        {
            name: '耕地面积',
            sub: [
                { key: 'ploughArea', lable: '万亩' }
            ]
        },
        {
            name: '高标准农田面积',
            sub: [
                { key: 'croplandArea', lable: '万亩' }
            ]
        },
        {
            name: '总人口',
            sub: [
                { key: 'totalPopulation', lable: '人' }
            ]
        },
        {
            name: '农业人口',
            sub: [
                { key: 'agriculturalPopulation', lable: '人' }
            ]
        },
        {
            name: '年粮食产量',
            sub: [
                { key: 'annualGrainOutput', lable: '万吨' }
            ]
        },
    ]

    const showProjectForm = () => {
        showDialog = true
        dataLoading = true
        getProjectAreaDetails().then(res => {
            dataLoading = false
            form = res.result
        })
    }

    // 保存
    const handleClickSave = () => {
        btnLoading = true
        getProjectAreaEdit(form).then(res => {
            btnLoading = false
            if(res.success){
                ElMessage.success('提交成功~')
                showDialog = false
            }
        })
    }

    defineExpose({
        showProjectForm
    })


</script>

<template>
    <el-dialog
        width="852px"
        title="项目区概况编辑"
        v-model="showDialog"
        custom-class="form-dialog"
    >
        <div class="form-item" v-loading="dataLoading">
            <div 
                class="form-row"
                v-for="(item , index) in params"
                :key="index"
            >
                <div class="title">{{ item.name }}</div>
                <div class="input-wrap">
                    <div 
                        :class="item.sub.length>1 ? 'row-count-2' : ''"
                        v-for="(sub, sIndex) in item.sub"
                        :key="sIndex"
                    >
                        <el-input-number :controls="false" v-model="form[sub.key]" />
                        <span class="label">{{ sub.lable }}</span>
                    </div>
                </div>
            </div>

        </div>

        <template #footer>
            <span class="dialog-footer flex-center">
                <el-button @click="showDialog = false">取消</el-button>
                <el-button 
                    type="primary" 
                    @click="handleClickSave" 
                    :loading="btnLoading"
                >保存</el-button>
            </span>
        </template>
                
    </el-dialog>
</template>